<template>
  <view class="pay">
    <button open-type="getUserInfo" @getuserinfo="getuserinfo">支付</button>
    <!-- 收货地址 -->
    <view v-if="address" class="address_info">
      <view class="address_name_wrap">
        <view>{{ address.userName }}</view>
        <view>{{ address.detail }}</view>
      </view>
      <view class="address_phone">{{ address.telNumber }}</view>
    </view>
    <!-- 商品列表 -->
    <view class="cart_main">
      <view class="cart_title">支付</view>
      <view class="cart_content">
        <view class="cart_item" v-for="(item, index) in cartList" :key="index">
          <van-card
            :price="item.goods_price"
            :title="item.goods_name"
            :thumb="
              item.goods_small_logo ||
              'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3030023840,1652137957&fm=26&gp=0.jpg'
            "
            custom-class="custom_class"
          >
          </van-card>
        </view>
      </view>
    </view>
    <!-- 提交订单 -->
    <van-submit-bar
      :price="countInfo.allPrice"
      :button-text="`支付(${countInfo.cateNum})`"
      :tip="true"
      custom-class="custom_class_btn"
    >
    </van-submit-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 存放收货地址
      address: null,
      cartList: [],
    };
  },
  computed: {
    countInfo() {
      // 2.计算总价格
      let allPrice = 0;
      this.cartList.forEach((goods) => {
        // 已经勾选的商品
        if (goods.checked) {
          allPrice += goods.count * goods.goods_price;
        }
      });
      // 准备要结算的商品种类
      let cateNum = this.cartList.filter((goods) => goods.checked).length;
      return {
        // 总价格
        allPrice: allPrice * 100,
        // 准备要结算的商品种类 cateNum
        cateNum,
      };
    },
  },
  onLoad() {
    this.address = getApp().globalData.address;
    // 缓存中的商品有选中的也有为选中的
    this.cartList = uni.getStorageSync("cartList").filter((v) => v.checked);
  },
  methods:{
    // 点击获取用户信息摁扭
    async getuserinfo(event){
      const { encryptedData, rawData, iv, signature } = event.detail;
      const res = await uni.login();
      const {code} = res[1];

      const params = {encryptedData, rawData, iv, signature,code};

      // 准备获取 token
      // 如果 管理员没有把你添加到 这个appid对应的项目的开发者名单中 那么获取token 一定会失败!!
      const res2 = await this.get({
        url:"/users/wxlogin",
        method:"post",
        data:params
      })

      const {token} = res2; //null
      // 创建订单
      // 构造订单需要参数
      const orderParams = {
        // 订单总价
        order_price:this.countInfo.allPrice,
        // 收货地址
        consignee_addr:this.address.detail,
        // 订单数组
        goods:this.cartList.map((goods)=>({
          // 商品id
          goods_id:goods.goods_id,
          // 购买数量
          goods_number:goods.count,
          // 单价
          goods_price:goods.goods_price
        }))
      };

      // 发送请求 提交订单 获取到订单编号
      const {order_number} = await this.get({
        url:"/my/orders/create",
        data:orderParams,
        method:"post",
        header:{Authorization: token}
      });
      // 获取支付参数 pay(为了调用微信支付使用)
      const {pay}=await this.get({
        url:"/my/orders/req_unifiedorder",
        data:{order_number},
        method:"post",
         header:{Authorization: token}
      })
      // 调用微信支付
      const res3 = await uni.requestPayment({...pay});
      console.log(res3);
    }
  }
};
</script>

<style lang="less">
.address_info {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid#e94350;
}
.cart_main {
  .cart_title {
    padding: 20rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #e94350;
    border-top: 1rpx solid #ccc;
    border-bottom: 1rpx solid #ccc;
  }
  .cart_content {
    .cart_item {
      border-bottom: 2rpx solid #ccc;
      .custom_class {
        background-color: #fff !important;
      }
    }
  }
}
.custom_class_btn{
  border-top: 2rpx solid#e94350;
}
</style>